<template>
  <a-modal
    v-model:visible="state.visible"
    :unmount-on-close="true"
    :on-before-ok="handleBeforeOk"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title>
      {{ state.module === "create" ? "新增" : "编辑" }}
    </template>
    <a-form :model="state.form" auto-label-width ref="formRef">
      <a-form-item
        field="code"
        label="学号"
        :rules="[{ required: true, message: '请输入学号' }]"
      >
        <a-input v-model="state.form.code" />
      </a-form-item>

      <a-form-item
        field="name"
        label="姓名"
        :rules="[{ required: true, message: '请输入姓名' }]"
      >
        <a-input v-model="state.form.name" />
      </a-form-item>

      <a-form-item
        field="positionCode"
        label="职位"
        :rules="[{ required: true, message: '请选择职位' }]"
      >
        <a-select v-model="state.form.positionCode">
          <a-option
            v-model="state.form.positionCode"
            v-for="item in state.positionList"
            :value="item?.value"
          >
            {{ item?.name }}
          </a-option>
        </a-select>
      </a-form-item>

      <a-form-item
        field="organizationCode"
        label="部门"
        :rules="[{ required: true, message: '请选择部门' }]"
      >
        <a-cascader
          :options="state.orgList"
          v-model="state.form.organizationCode"
          placeholder="请选择部门"
          allow-search
          check-strictly
        />
      </a-form-item>
      <a-form-item
        field="hotelOrgCode"
        label="宿舍"
        :rules="[{ required: true, message: '请选择宿舍' }]"
      >
        <a-cascader
          :options="state.hotelList"
          v-model="state.form.hotelOrgCode"
          placeholder="请选择宿舍"
          allow-search
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import {
  useEmployeeCreateApi,
  useEmployeeUpdateApi,
  useHotelListApi,
  useOrganizationListApi,
  usePositionListApi,
} from "@/api";
import { findParentCodeList, formatTree } from "@/utils/tree";
import { Message } from "@arco-design/web-vue";
import { ref, reactive } from "vue";
const formRef = ref();
const emit = defineEmits(["refresh"]);
const useForm = () => {
  return {
    code: "",
    name: "",
    organizationCode: "",
    positionCode: "",
    hotelOrgCode: "",
  };
};
const state = reactive({
  form: useForm(),
  module: "update",
  positionList: [],
  orgList: [],
  hotelList: [],
  visible: false,
});

const getPositionList = () => {
  usePositionListApi({}).then(({ data }) => {
    state.positionList = data?.map((item) => {
      return {
        ...item,
        label: item.name,
        value: item.code,
      };
    });
  }) || [];
};
const getOrgList = () => {
  useOrganizationListApi({}).then(({ data }) => {
    data = data?.map((item) => {
      return {
        ...item,
        label: item.name,
        value: item.code,
      };
    });
    let tree = formatTree(data, "");
    state.orgList = tree;
  });
};
const getHotelList = () => {
  useHotelListApi({}).then(({ data }) => {
    data = data?.map((item) => {
      return {
        ...item,
        label: item.name,
        value: item.code,
      };
    });
    let tree = formatTree(data, "");
    state.hotelList = tree;
  });
};

const open = (type: string, data: any) => {
  state.module = type;
  getPositionList();
  getOrgList();
  getHotelList();
  if (state.module === "update") {
    state.form.code = data.code;
    state.form.name = data.name;
    state.form.positionCode = data.positionCode;
    state.form.organizationCode = data.organizationCode;
  }
  state.visible = true;
};

const handleBeforeOk = async () => {
  const val = await formRef.value.validate();
  if (val) return false;
  if (state.module === "create") {
    console.log(state.form.organizationCode, "11");
    useEmployeeCreateApi(state.form)
      .then(() => {
        Message.success("操作成功");
        emit("refresh");
      })
      .catch((err) => {
        Message.error("操作失败");
      });
  } else {
    useEmployeeUpdateApi(state.form).then(() => {
      emit("refresh");
    });
  }
  return true;
};

const handleOk = () => {
  state.visible = false;
  state.form = useForm();
};

const handleCancel = () => {
  state.visible = false;
  state.form = useForm();
};

defineExpose({
  open,
});
</script>
<style scoped lang="less"></style>
